<template>
  <Content class="border-bg">
    <span slot="header-text" class="header-text">加盟懒精灵</span>
    <div slot="main-content" class="main-content">
      <div class="content-text">
        <h3 class="content-title">低成本，轻运营 <br /> 一站式加盟开店服务</h3>
        <span>八年实战干货，价值百万的懒精灵运营支持工具箱，6大板块指导，业绩无忧。</span>
      </div>
      <!-- 加盟流程 -->
      <div class="technological-process">
        <div class="content-box">
          <h3>1</h3>
          <span>意向了解 <br> 考察洽谈</span>
        </div>
        <div class="content-box">
          <h3>2</h3>
          <span>资质审核 <br> 签订合同</span>
        </div>
        <div class="content-img">
          <el-image :src="spiritUrl[0].Img" alt="" fit="cover"></el-image>
        </div>
        <div class="content-box">
          <h3>3</h3>
          <span>店面装修 <br> 店面陈列</span>
        </div>
        <div class="content-box">
          <h3>4</h3>
          <span>物料配送 <br> 开业活动</span>
        </div>
        <div class="content-box">
          <h3>5</h3>
          <span>店员培训 <br> 工匠服务</span>
        </div>
        <div class="content-img">
          <el-image :src="spiritUrl[1].Img" alt="" fit="cover"></el-image>
        </div>
        <div class="content-box">
          <h3>6</h3>
          <span>开店运营 <br> 管理指导</span>
        </div>
      </div>
    </div>
    <el-button slot="button" round @click="$router.push('/join2')">加盟案例+</el-button>
  </Content>
</template>

<script>
import Content from '@/components/content/Content.vue'
export default {
  components: {
    Content
  },
  data () {
    return {
      spiritUrl: [
        { Img: "" },
        { Img: "" }
      ]
    }
  },
  methods: {
    //获取数据
    async getData () {
      const { data: ret } = await this.$http.get('/static/data.json')
      var arr = ret.data.spirit
      this.spiritUrl = arr
    },
  },
  mounted () {
    this.getData()
  }
}
</script>

<style lang='less' scoped>
.border-bg {
  background: url("../../../assets/images/spirit/border.png") no-repeat;
  background-position: 0% 65%;
}
.main-content {
  .content-text {
    text-align: center;
    color: #fff;
    margin-bottom: 3rem;
    h3 {
      font-size: 3rem;
      font-weight: 400;
      line-height: 4rem;
      margin: 1rem 0 1rem;
    }
  }
  .technological-process {
    display: flex;
    .content-box {
      width: 112px;
      height: 300px;
      border: 2px solid #8db83c;
      background-color: #007455;
      border-radius: 18px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 0 1rem;
      h3 {
        font-size: 2.4rem;
        color: #8db83c;
        margin: 0 0;
      }
      span {
        color: #fff;
        font-size: 1.1rem;
        font-weight: 500;
        margin: 0;
        line-height: 2rem;
      }
    }
    .el-image {
      top: 50%;
      transform: translate(0, -50%);
    }
  }
}
.el-button {
  background: #8db83c;
  border: #8db83c;
  color: #fff;
}
@media only screen and (max-width: 768px) {
  .main-content {
    .technological-process {

    }
  }
}
</style>